.component {
}

.custom-component {
    width: auto;
    height: auto;
}

.modal-background {
    background-color: black;
    opacity: 0.2;
}

.modal-component {
    filter: blur(1);
}

/************************************************************************
** DIALOGS
*************************************************************************/
.dialog {
    border: 1px solid #ABABAB;
    filter: drop-shadow(1, 45, #000000, 0.2, 2, 2, 1, 3, false);
    border-radius: 2px;
    height: auto;
    width: 300px;
    background-color: white;
    padding: 1px;
}

.dialog-title-bar {
    background-color: #EEEEEE;
    padding: 5px;
    width: 100%;
    border-bottom-width: 1px;
    border-bottom-color: #ABABAB;
}

.dialog-title {
    width: 100%;
    vertical-align: center;
    font-style: bold;
    color: #888888;
}

.dialog-content {
    padding: 10px;
}

.dialog-close-button {
    icon: "haxeui-core/styles/default/small-close-button.png";
    padding: 0 !important;
    border: none !important;
    background-color: none !important;
    horizontal-align: right;
    vertical-align: center;
}

.dialog-buttons {
    horizontal-align: right;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
}

.message-dialog-message {
    vertical-align: center;
}

/************************************************************************
** LABEL
*************************************************************************/
.label {
    width: auto;
    height: auto;
}

/************************************************************************
** IMAGE
*************************************************************************/
.image {
    width: auto;
    height: auto;
}

/************************************************************************
** BUTTON
*************************************************************************/
.button {
    background: #EDEDED #E6E6E6 vertical;
    color: #222222;
    border: 1px solid #ABABAB;
    border-radius: 2px;
    padding: 5px 5px;
    cursor: pointer;
    width: auto;
    height: auto;
    spacing: 5px 5px;
}

.button:hover {
    background: #F5F5F5 #F1F1F1 vertical;
    color: #000000;
}

.button:down {
    background: #D2D2D2 #C2C2C2 vertical;
    color: #000000;
    border-color: #7F7F7F;
}

.button:active {
    border: 2px solid #77C6FF;
}

.button.emphasized {
    background: #DAE4EE #D4DEE8 vertical;
    border-color: #6CA1D7;
}

.button.emphasized:hover {
    background: #E2ECF6 #DEE8F2 vertical;
    border-color: #6CA1D7;
}

.button.emphasized:down {
    background: #C2CCD6 #B4BEC8 vertical;
    border-color: #568CC1;
}

.button:disabled {
    background: #D4D4D4 #CCCCCC vertical;
    color: #909090;
    cursor: default;
}
/************************************************************************
** TEXT FIELD
*************************************************************************/
.textfield {
    background-color: #FFFFFF;
    color: #444444;
    border: 1px solid #ABABAB;
    border-radius: 2px;
    padding: 5px 5px;
    filter: drop-shadow(1, 45, #888888, 0.2, 1, 1, 1, 3, true);
    height: auto;
    spacing: 5px;
    icon-position: right;
}

.textfield:active {
    border: 1px solid #216AAE;
}

.textfield:empty {
    color: #A0A0A0;
}

.textfield:disabled {
    background: #D4D4D4 #CCCCCC vertical;
    color: #909090;
    cursor: default;
}

.textarea {
    color: #444444;
    border: 1px solid #ABABAB;
    border-radius: 2px;
    padding-top: 1px;
    padding-left: 1px;
    padding-bottom: 1px;
    padding-right: 0px;
    filter: drop-shadow(1, 45, #888888, 0.2, 1, 1, 1, 3, true);
    background-color: white;
}

.textarea:active {
    border: 1px solid #216AAE;
}

.textarea:empty {
    color: #A0A0A0;
}

/************************************************************************
** CONTAINERS
*************************************************************************/
.box, .vbox, .hbox, .absolute, .continuoushbox, .hgrid, .vgrid, .grid {
    spacing: 5px 5px;
}

.box, .vbox, .hbox, .continuoushbox, .hgrid, .vgrid, .grid {
    width: auto;
    height: auto;
}

/************************************************************************
** SCROLL
*************************************************************************/
.scroll {
    background-color: #E9E9E9;
}

.scroll .button {
    border-radius: 0;
    border: none;
    background-color: #E9E9E9;
    padding: 0;
    filter: none;
}

.scroll .button:hover {
    background-color: #D7D7D7;
}

.scroll .button:down {
    background-color: #525252;
    filter: none;
}

.scroll .button.deinc {
    height: 17px;
    width: 17px;
    opacity: 1;
}

.scroll .button.deinc:disabled {
    opacity: 0.5;
}

.scroll .button.deinc:down {
}

.scroll .button.inc {
    height: 17px;
    width: 17px;
    opacity: 1;
}

.scroll .button.inc:disabled {
    opacity: 0.5;
}

.scroll .button.inc:down {
}

.scroll .button.thumb {
    background-color: #C6C6C6;
}

.scroll .button.thumb:hover {
    background-color: #AAAAAA;
}

.scroll .button.thumb:down {
    background-color: #525252;
}

.scroll .button.thumb:disabled {
    background-color: #DDDDDD;
}

/************************************************************************
** VSCROLL
*************************************************************************/
.vscroll {
    width: 17px;
}

.vscroll .button.thumb {
    width: 17px;
    height: 17px;
}

.vscroll .button.deinc {
    icon: "haxeui-core/styles/default/up_arrow.png";
}

.vscroll .button.deinc:down {
    icon: "haxeui-core/styles/default/up_arrow_white.png";
}

.vscroll .button.inc {
    icon: "haxeui-core/styles/default/down_arrow.png";
}

.vscroll .button.inc:down {
    icon: "haxeui-core/styles/default/down_arrow_white.png";
}

/************************************************************************
** HSCROLL
*************************************************************************/
.hscroll {
    height: 17px;
}

.hscroll .button.thumb {
    width: 17px;
    height: 17px;
}

.hscroll .button.deinc {
    icon: "haxeui-core/styles/default/left_arrow.png";
}

.hscroll .button.deinc:down {
    icon: "haxeui-core/styles/default/left_arrow_white.png";
}

.hscroll .button.inc {
    icon: "haxeui-core/styles/default/right_arrow.png";
}

.hscroll .button.inc:down {
    icon: "haxeui-core/styles/default/right_arrow_white.png";
}

/************************************************************************
** SCROLLVIEW
*************************************************************************/
.scrollview {
    border: 1px solid #ABABAB;
    border-radius: 1px;
    padding: 1px;
    width: auto;
    height: auto;
}

.scrollview .scrollview-contents {
    height: auto;
    spacing: 5px;
    padding: 5px;
    border: none;
}

/************************************************************************
** CHECKBOX
*************************************************************************/
.checkbox {
    width: auto;
    height: auto;
    horizontal-spacing: 4px;
    cursor: pointer;
    color: #000000;
}

.checkbox:hover {
}

.checkbox:disabled {
    cursor: default;
    color: #909090;
}

.checkbox-value {
    border: 1px solid #ABABAB;
    background-color: #FFFFFF;
    width: 16px;
    height: 16px;
    vertical-align: center;
    border-radius: 2px;
    icon: none;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
    cursor: pointer;
}

.checkbox-value:hover {
    border: 1px solid #216AAE;
}

.checkbox-value:selected {
    icon: "haxeui-core/styles/default/check.png";
}

.checkbox-value:disabled {
    background: #D4D4D4 #CCCCCC vertical;
    cursor: default;
}

.checkbox-label {
    vertical-align: center;
}

.checkbox-icon {
    horizontal-align: center;
    vertical-align: center;
    cursor: pointer;
    opacity: 1;
}

.checkbox-icon:disabled {
    cursor: default;
    opacity: 0.5;
}

/************************************************************************
** OPTIONBOX
*************************************************************************/
.optionbox {
    width: auto;
    height: auto;
    horizontal-spacing: 4px;
    cursor: pointer;
    color: #000000;
}

.optionbox:hover {
}

.optionbox:disabled {
    cursor: default;
    color: #909090;
}

.optionbox-value {
    border: 1px solid #ABABAB;
    background-color: #FFFFFF;
    width: 16px;
    height: 16px;
    vertical-align: center;
    border-radius: 18px;
    icon: none;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
    padding-top: 1px;
    cursor: pointer;
}

.optionbox-value:hover {
    border: 1px solid #216AAE;
}

.optionbox-value:selected {
    icon: "haxeui-core/styles/default/option.png";
}

.optionbox-value:disabled {
    background: #D4D4D4 #CCCCCC vertical;
    cursor: default;
}

.optionbox-label {
    vertical-align: center;
    cursor: pointer;
}

.optionbox-icon {
    horizontal-align: center;
    vertical-align: center;
    cursor: pointer;
    opacity: 1;
}

.optionbox-icon:disabled {
    cursor: default;
    opacity: 0.5;
}
/************************************************************************
** HPROGRESS
*************************************************************************/
.hprogress {
    border: 1px solid #ABABAB;
    padding: 2px;
    border-radius: 2px;
    background: #F1F1F1 #FFFFFF vertical;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
}

.hprogress .progress-value {
    border: none;
    background: #6CAADB #216AAE vertical;
    height: 100%;
    border-radius: 2px;
}

.hprogress .progress-value:disabled {
    background: #BFBFBF #8C8C8C vertical;
}

/************************************************************************
** VPROGRESS
*************************************************************************/
.vprogress {
    border: 1px solid #ABABAB;
    padding: 2px;
    border-radius: 2px;
    background: #F1F1F1 #FFFFFF horizontal;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
}

.vprogress .progress-value {
    border: none;
    background: #6CAADB #216AAE horizontal;
    width: 100%;
    border-radius: 2px;
}

.vprogress .progress-value:disabled {
    background: #BFBFBF #8C8C8C horizontal;
}

/************************************************************************
** HSLIDER
*************************************************************************/
.hslider {
    padding-left: 5px;
    padding-right: 5px;
}

.hslider .slider-value-background {
    border: 1px solid #ABABAB;
    padding: 2px;
    border-radius: 4px;
    background: #F1F1F1 #FFFFFF vertical;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
    width: 100%;
    height: 8px;
    vertical-align: center;
    cursor: pointer;
}

.hslider .slider-value-background:disabled {
    cursor: default;
}

.hslider .slider-value {
    border: none;
    background: #6CAADB #216AAE vertical;
    height: 100%;
    border-radius: 2px;
    cursor: pointer;
}

.hslider .slider-value:disabled {
    background: #BFBFBF #8C8C8C vertical;
    cursor: default;
}

.hslider .slider-button {
    vertical-align: center;
    height: 14px;
    width: 14px;
    border-radius: 16px;
}

/************************************************************************
** VSLIDER
*************************************************************************/
.vslider {
    padding-top: 5px;
    padding-bottom: 5px;
}

.vslider .slider-value-background {
    border: 1px solid #ABABAB;
    padding: 2px;
    border-radius: 4px;
    background: #F1F1F1 #FFFFFF horizontal;
    filter: drop-shadow(1, 45, #888888, 0.2, 2, 2, 1, 3, true);
    height: 100%;
    width: 8px;
    horizontal-align: center;
    cursor: pointer;
}

.vslider .slider-value-background:disabled {
    cursor: default;
}

.vslider .slider-value {
    border: none;
    background: #6CAADB #216AAE horizontal;
    width: 100%;
    border-radius: 2px;
    cursor: pointer;
}

.vslider .slider-value:disabled {
    background: #BFBFBF #8C8C8C horizontal;
    cursor: default;
}

.vslider .slider-button {
    horizontal-align: center;
    height: 14px;
    width: 14px;
    border-radius: 16px;
}

/************************************************************************
** TABS
*************************************************************************/
.tabbar {
    horizontal-spacing: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: auto;
    width: auto;
    background-color: white;
    border-bottom-width: 1px;
    border-bottom-color: #ABABAB;
    clip: true;
}

.tabbar .tabbar-contents {
    border: none;
    border-bottom-width: 1px;
    border-bottom-color: #ABABAB;
}

/*
.tabbar .tabbar-background {
    background-color: white;
    border: none;
}
*/

.tabbar-button {
    border-radius: 0px;
    background: #EDEDED #E6E6E6 vertical;
    padding: 6px;
    vertical-align: bottom;
}

.tabbar-button:down {
}

.tabbar-button-selected, .tabbar-button-selected:hover, .tabbar-button-selected:down {
    border-radius: 0px;

    border: 1px solid #ABABAB;
    border-bottom-width: 1px;
    border-bottom-color: white;
    background-color: white;
}

.tabbar-scroll-left {
    icon: "haxeui-core/styles/default/left_arrow.png";
    border-radius: 0;
}

.tabbar-scroll-right {
    icon: "haxeui-core/styles/default/right_arrow.png";
    border-radius: 0;
}

.tabbar-button-selected .label {
}

.tabbar-button-selected .icon {
}

.tabview {
    border: none;
    width: auto;
    height: auto;
}

.tabview .tabview-tabs {
}

.tabview .tabview-content {
    border: 1px solid #ABABAB;
    padding: 5px;
    width: 100%;
    height: 100%;
}

/************************************************************************
** LISTVIEW
*************************************************************************/
.listview {
    border: 1px solid #ABABAB;
    border-radius: 1px;
    padding: 1px;
    width: auto;
    height: auto;
    background-color: #FFFFFF;
}

.listview .listview-contents {
    spacing: 0;
    width: 100%;
    padding: 1px;
}

.itemrenderer {
    height: auto;
    padding: 5px;
}

.listview .itemrenderer.even {
    background-color: #FFFFFF;
    cursor: pointer;
}

.listview .itemrenderer.even:hover {
    background-color: #ecf2f9;
}

.listview .itemrenderer.odd {
    background-color: #F8F8F8;
    cursor: pointer;
}

.listview .itemrenderer.odd:hover {
    background-color: #ecf2f9;
}

.listview .itemrenderer:selected {
    background-color: #a7c4e2;
    color: white;
}

/************************************************************************
** DROPDOWNS
*************************************************************************/
.listview.popup {
    filter: drop-shadow(1, 45, #000000, 0.2, 2, 2, 1, 3, false);
}

.dropdown {
    icon: "haxeui-core/styles/default/up_down_arrows.png";
    icon-position: far-right;
}

/************************************************************************
** HEADER
*************************************************************************/
.header {
    width: auto;
    height: auto;
    spacing: 0;
}

.header .column {
    border-radius: 0;
    icon-position: far-right;
}

.header .column.sortable {
    icon: "haxeui-core/styles/default/up_down_arrows.png";
    icon-position: far-right;
}

.column .label {
    width: 92%;
}

/************************************************************************
** TABLEVIEW
*************************************************************************/
.tableview {
    border: 1px solid #ABABAB;
    border-radius: 1px;
}

.tableview .tableview-row {
    padding: 0px;
    spacing: 2px;
    background-color: #DDDDDD;
}

.tableview .tableview-contents {
    spacing: 0;
    padding: 0;
    margin-top: -1px;
}

.tableview .itemrenderer.even {
    background-color: #FFFFFF;
}

.tableview .itemrenderer.even:hover {
    background-color: #F0F0F0;
}

.tableview .itemrenderer.odd {
    background-color: #F8F8F8;
}

.tableview .itemrenderer.odd:hover {
    background-color: #F0F0F0;
}

.tableview .itemrenderer:selected {
    background-color: #CCCCCC;
}

/************************************************************************
** SWITCH
*************************************************************************/

.switch {
    background-color: #FFFFFF;
    border: 1px solid #ABABAB;
    border-radius: 2px;
    cursor: pointer;
    padding: 0px;
    width: 60px;
    height: 20px;
    filter: drop-shadow(1, 45, #888888, 0.3, 1, 1, 1, 3, true);
}

.switch:hover {
    background-color: #FFFFFF;
}

.switch:selected {
    background-color: #98c4e6;
}

.switch .button {
    height: 100%;
    width: 50%;
}

.switch-label {
    color: #ABABAB;
}

.switch-label:selected {
    color: #2d7cb9;
}
